<template>
  <div class="w-80 h-full generator-field-right">
    <el-tabs>
      <el-tab-pane label="配置" name="first">
        <el-form label-width="80px">
          <generate-field-form-item :config="item" v-for="(item,key) in activeItem.__field_props__" :key="key"></generate-field-form-item>
          <el-button class="w-full" @click="resetLoad" >重新加载</el-button>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="表单" name="second">
        <el-form label-width="80px">
          <generate-field-form-item :config="item" v-for="(item,key) in activeItem.__config__" :key="key"></generate-field-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Vue from "vue";
import GenerateFieldFormItem from "../GenerateFieldFormItem"
import GenerateFieldFormParseArrayObject from "../GenerateFieldFormParseArrayObject"

Vue.component(GenerateFieldFormItem.name,GenerateFieldFormItem)
Vue.component(GenerateFieldFormParseArrayObject.name,GenerateFieldFormParseArrayObject)

export default {
  name: "generate-layout-right",
  props:{
    activeItem:{
      type:Object
    },
    activeId:{
      type:Number
    }
},
  methods:{
    resetLoad(){
      this.$bus.$emit("reload",this.activeId)
    }
  }
}
</script>

<style lang="less" scoped>
.generator-field-right /deep/ .el-tabs{
  height: 100%;
}
.generator-field-right /deep/  .el-tabs__content{
  height: calc(100% - 55px);
  padding:0 10px;
}
</style>
